import React, { useEffect } from 'react';
import {
  Form,
  Modal,
  Grid,
  Input,
  InputNumber,
  TimePicker,
  Select,
  Space,
  Button,
} from '@arco-design/web-react';
import * as Model from '@/services/model';
import { IconDelete } from '@arco-design/web-react/icon';
const { useForm } = Form;
const { Row, Col } = Grid;
interface DetailModalProps {
  visible?: boolean;
  axisXs: any[];
  axisYs: any[];
  onCancel: () => void;
  onOk: (params: Model.Truck) => void;
}

export const MultipalModal = (props: DetailModalProps) => {
  const [form] = useForm();

  useEffect(() => {
    if (props.visible) {
      form.setFieldsValue({ points: [{}] });
    }
  }, [props.visible]);

  const submit = async () => {
    const res = await form.validate();
    if (res) {
      props.onOk(res);
    }
  };
  return (
    <Modal
      visible={props.visible}
      title="编辑矩阵"
      mountOnEnter
      unmountOnExit
      onCancel={props.onCancel}
      onOk={submit}
      alignCenter={false}
      okText="提交"
      cancelText="取消"
      style={{ width: 1000 }}
    >
      <Form
        form={form}
        labelAlign="left"
        labelCol={{ span: 6 }}
        wrapperCol={{ span: 18 }}
      >
        <Row gutter={24}>
          <Col span={24}>
            <Form.List field="points">
              {(fields, { add, remove, move }) => {
                console.log(fields);
                return (
                  <div>
                    {fields.map((e, index) => (
                      <Row gutter={24} key={e.key}>
                        <Col span={7}>
                          <Form.Item label="坐标" style={{ marginBottom: 0 }}>
                            <Row gutter={24} key={e.key}>
                              <Col span={12}>
                                <Form.Item
                                  label=""
                                  field={e.field + '.from'}
                                  rules={[
                                    {
                                      required: true,
                                      message: '坐标必填',
                                    },
                                  ]}
                                >
                                  <Select
                                    placeholder="起"
                                    onChange={(value) => {
                                      const { to, d, t } = form.getFieldValue(
                                        e.field + '.to'
                                      );
                                      if (value && to && !d && !t) {
                                        form.setFieldValue(
                                          e.field + '.t',
                                          Math.floor(Math.random() * 1000)
                                        );
                                        form.setFieldValue(
                                          e.field + '.d',
                                          Math.floor(Math.random() * 1000)
                                        );
                                      }
                                    }}
                                    allowClear
                                  >
                                    {props.axisXs.map((e) => (
                                      <Select.Option key={e.i} value={e.i}>
                                        {e.n}
                                      </Select.Option>
                                    ))}
                                  </Select>
                                </Form.Item>
                              </Col>
                              <Col span={12}>
                                <Form.Item
                                  label=""
                                  field={e.field + '.to'}
                                  rules={[
                                    {
                                      required: true,
                                      message: '坐标必填',
                                    },
                                  ]}
                                >
                                  <Select
                                    placeholder="止"
                                    onChange={(value) => {
                                      const { from, d, t } = form.getFieldValue(
                                        e.field
                                      );

                                      if (value && from && !d && !t) {
                                        form.setFieldValue(
                                          e.field + '.t',
                                          Math.floor(Math.random() * 1000)
                                        );
                                        form.setFieldValue(
                                          e.field + '.d',
                                          Math.floor(Math.random() * 1000)
                                        );
                                      }
                                    }}
                                    allowClear
                                  >
                                    {props.axisYs.map((e) => (
                                      <Select.Option key={e.i} value={e.i}>
                                        {e.n}
                                      </Select.Option>
                                    ))}
                                  </Select>
                                </Form.Item>
                              </Col>
                            </Row>
                          </Form.Item>
                        </Col>

                        <Col span={7}>
                          <Form.Item
                            label="距离"
                            field={e.field + '.d'}
                            rules={[
                              {
                                required: true,
                                message: '距离必填',
                              },
                            ]}
                          >
                            <Input
                              addAfter="千米"
                              placeholder="请输入距离"
                              allowClear
                            />
                          </Form.Item>
                        </Col>
                        <Col span={7}>
                          <Form.Item
                            label="时间"
                            field={e.field + '.t'}
                            rules={[
                              {
                                required: true,
                                message: '时间必填',
                              },
                            ]}
                          >
                            <Input
                              addAfter="小时"
                              placeholder="请输入时间"
                              allowClear
                            />
                          </Form.Item>
                        </Col>
                        <Col span={3}>
                          <Button onClick={() => remove(index)} status="danger">
                            <IconDelete />
                          </Button>
                        </Col>
                      </Row>
                    ))}
                    <Space size={20}>
                      <Button
                        onClick={() => {
                          add({});
                        }}
                      >
                        增加一条
                      </Button>
                    </Space>
                  </div>
                );
              }}
            </Form.List>
          </Col>
        </Row>
      </Form>
    </Modal>
  );
};
